<template>
  <div>
      <!-- <breadcrumb></breadcrumb> -->

      <h2 style="color: gray;">用户详情</h2>
      <el-divider></el-divider>

      <!-- 详情 -->
       <template v-if="details">
            <el-descriptions  direction="vertical"  border>
                <!-- 用户 -->
                <el-descriptions-item label="用户性别">
                    <el-tag size="small">{{details[0].sex}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="用户身份" :span="1">{{type}}</el-descriptions-item>
                <el-descriptions-item label="用户昵称">{{details[0].uname}}</el-descriptions-item>
                <el-descriptions-item label="用户密码">{{details[0].upwd}}</el-descriptions-item>
                <el-descriptions-item label="用户手机号">{{details[0].phone}}</el-descriptions-item>
                <!-- 店铺基本信息 -->
                <el-descriptions-item label="用户真实名称">{{details[0].user_name}}</el-descriptions-item>
                <el-descriptions-item label="用户邮箱">{{details[0].email}}</el-descriptions-item>
                <el-descriptions-item label="用户QQ">{{details[0].qq}}</el-descriptions-item>
                <el-descriptions-item label="用户生日" :span="2">{{details[0].birthday}}</el-descriptions-item>
            </el-descriptions>
        </template>
      <template v-else>
          <el-empty>
              <el-button type="primary"  @click="$router.push(`/home/shop-list`)" plain>返回</el-button>
          </el-empty>
      </template>
      <br>
      <!-- 操作 -->
      <el-button-group v-if="$store.state.utype === '1'">
          <el-button type="primary"  icon="el-icon-arrow-left" @click="upper" :disabled="uppernone">上一个</el-button>
          <el-button type="primary" @click="lower" :disabled="lowernone" >下一个<i class="el-icon-arrow-right el-icon--right"  ></i></el-button>
      </el-button-group>
      
  </div>
</template>

<script>
import httpApi from '@/http';
import breadcrumb from '../components/breadcrumb.vue';
  export default {
    components: { breadcrumb},
      data(){
          return{
              details:[],
              type:'',
              uppernone : false,
              lowernone : false,
              // 获取参数id，加载当前选中的用户的详细信息（发请求）
              id:this.$route.params.id,
          }
      },
      methods:{
          detailslist(){
              httpApi.userApi.queryUserDetailsById({uid:this.id}).then(res =>{
                  console.log("详情",res);
                  this.details = res.data.results
                  console.log(this.details,'11');
                  if(this.details[0].user_type === 0){
                      this.type = '普通用户'
                  }else if(this.details[0].user_type === 1){
                      this.type = '系统管理员'
                  }else if(this.details[0].user_type === 2){
                    this.type = '店铺管理员'
                  }
              })

          },
          upper(){
              if(this.id === 1){
                  this.uppernone = true
              }else {
                 this.id--
                 this.detailslist() 
                 
              }
              
          },
          lower(){
              if(this.details.length == 0){
                  this.lowernone = true
              }else{
                 this.id++ 
                 this.uppernone = false
                 this.lowernone = false
                 this.detailslist()
              }   
          }
      },
      mounted(){
            this.detailslist() 
      }
  }
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions-item__content{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 30px;
}
</style>